<template>
  <view class="container">
	<view class="header">
    <view class="user-info">
      <view class="user-left">
        <view class="avatar-container">
          <image class="avatar" src="/static/11.png"></image>
          <view class="avatar-badge"></view>
        </view>
        <view class="user-details">
          <text class="name">梁志刚</text>
          <text class="greeting">欢迎回来</text>
        </view>
      </view>
	  <navigator url="/pages/set/set" hover-class="none"><image class="notification-icon" src="/static/22.png"></image></navigator>
    </view>
    
    <view class="date-container">
      <uni-icons type="calendar" size="18" color="#1a73e8"></uni-icons>
      <text class="date">2025年5月30日 星期五</text>
    </view>
	</view>
	
 
	<navigator url="/pages/allreport/new-daily-report" hover-class="none">
		<view class="create-btn" @click="createReport">
		  <text>新建日报</text>
		  <image src="/static/add.png" mode="" class="imageadd"></image>
		</view>
	</navigator>
    
  <view class="section">
    <text class="section-title">我的功能</text>
    <view class="section-content">
      <view class="function-grid">
        <view class="function-item">
          <navigator url="/pages/allreport/allreport" open-type="navigate" class="function-link" hover-class="none">
            <image src="/static/all-report.png" class="func-icon"></image>
         </navigator>
		  <navigator url="/pages/allreport/allreport" open-type="navigate" class="function-link" hover-class="none">
		  	<text class="func-name">全部日报</text>
		  </navigator>
        </view>
        
        <view class="function-item">
		<navigator url="" open-type="navigate" class="function-link" hover-class="none">
          <image src="/static/my-report.png" class="func-icon"></image>
		</navigator>
		<navigator url="" open-type="navigate" class="function-link" hover-class="none">
			<text class="func-name">我的日报</text>
		</navigator>
        </view>
		
        <view class="function-item">
		<navigator url="" open-type="navigate" class="function-link" hover-class="none">
          <image src="/static/manage.png" class="func-icon"></image>
		</navigator>
		<navigator url="" open-type="navigate" class="function-link" hover-class="none">
			<text class="func-name">PDF管理</text>
		</navigator>
        </view>
		
      </view>
    </view>
  </view>
    
    <view class="section">
      <text class="section-title">未填报项目</text>
      <view class="section-content">
        <view class="project-item">
          <view class="item" v-for="(item, index) in projects" :key="index"> {{ item }}  </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const createReport = () => {
  uni.navigateTo({
    url: '/pages/report/create'
  });
};
const projects = [
  "百色市百色中学",
  "钦州幼儿师范高等专科学校",
  "广西理工职业技术学校",
  "百色市第一中学",
  "百色高级中学",
  "广西警察学院长湖校区",
  "广西警察学院五合校区",
  "广西警官学校",
  "广西大学",
  "桂林理工大学"
];
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  background-color: #fff;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  
  .header {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden; /* 关键修改：强制内容遵循圆角 */

    .user-info {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      background-color: inherit; /* 继承父容器背景色 */
      
      .user-left {
        display: flex;
        align-items: center;
      }
      
      .avatar-container {
        position: relative;
        margin-right: 10rpx;
        
        .avatar {
          width: 175rpx;
          height: 175rpx;
          border-radius: 50%;
        }
        
        .avatar-badge {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 20rpx;
          height: 20rpx;
          border: 2rpx solid #fff;
          border-radius: 50%;
        }
      }
      
      .user-details {
        display: flex;
        flex-direction: column;
        
        .name {
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .greeting {
          font-size: 30rpx;
          color: #666;
        }
      }
      
      .notification-icon {
        width: 60rpx;
        height: 60rpx;
        margin-top: 50rpx;
        margin-right: 15px;
      }
    }
    
    .date-container {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      background-color: inherit; /* 继承父容器背景色 */
      
      .date {
        font-size: 28rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
}


.create-btn {
  background: linear-gradient(135deg, #3a57ff, #47b9ff);
  border-radius: 16rpx;
  padding: 28rpx 32rpx; /* 增加左右内边距 */
  display: flex; /* 添加flex布局 */
  justify-content: space-between; /* 文字和图标分居两侧 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 12rpx rgba(13, 92, 182, 0.2);
  text {
    font-size: 36rpx;
    font-weight: 600;
    color: #fff;
  }
  
  .imageadd {
    width: 30rpx;
    height: 30rpx;
  }
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  
  .section-title {
    display: block;
    padding: 24rpx 32rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #2c3e50;
    border-bottom: 1rpx solid #eee;
  }
	.section-title {
	  display: block;
	  padding: 24rpx 32rpx; 
	  font-size: 34rpx;
	  font-weight: bold;
	  color: #2c3e50;
	  border-bottom: 1rpx solid #eee;
	  position: relative; 
	  padding-left: 48rpx; 
	}

	.section-title::before {
	  content: ""; 
	  position: absolute;
	  left: 25rpx; 
	  top: 50%; 
	  height: 50%; 
	  width: 8rpx; 
	  background-color: #409eff; 
	  transform: translateY(-50%); 
	  border-radius: 3rpx; 
	}
 .function-grid {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  
  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    background-color: #f5f5f5;
    border-radius: 20rpx;
    padding: 20rpx 0; /* 增加内边距 */
    min-height: 180rpx; /* 确保高度一致 */
    
    .function-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      text-decoration: none;
	  .func-icon {
	    width: 100rpx;
	    height: 100rpx;
	    margin-bottom: 16rpx;
	  	
	  }
	  
	  .func-name {
	    font-size: 28rpx;
	    color: #333;
	    font-weight: bold; /* 确保字体粗细一致 */
	  }
    }
  }
}

.section-content {
.project-item {
  padding: 28rpx 32rpx;
  position: relative;
  .item:nth-child(n){
	font-size: 28rpx;
	color: #ffffff;
	background-color: #0099e6;
	margin: 10px;
	padding: 6px;
	border-radius: 10rpx;
	font-weight: bold
	  }
  .item:nth-child(2n) {
	font-size: 28rpx;
	color: #ffffff;
	background-color: #7ee3ff;
	margin: 10px;
	padding: 6px;
	border-radius: 10rpx;
	font-weight: bold
  }
 }


.last::after {
  display: none;
    }
  }
}

.container {
  background-color: #fafafa;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  
}

</style>